<!--
 * @Description: 第三十三章（css Style完整新特性）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-21 12:45:35
-->
<template>
  <div>
    <h1>第三十三章（css Style完整新特性）</h1>
    <div>
      <div>
        <A>
          <div class="a">私人定制DIV</div>
        </A>
      </div>
    </div>
    <hr />
    <div>
      <h2>动态css</h2>
      <div class="div">动态的</div>
      <div :class="$style.div2">Style Module 单个样式</div>
      <div :class="[$style.div2, $style.div2border]">Style Module 多个样式</div>
      <div :class="[ia.div3, ia.div3border]">Style Module 自定义module name</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, useCssModule } from 'vue'
import A from '@/components/33th/A.vue'
const style = ref('red')
const style2 = ref({
  textDecorationUnderline: 'underline',
})

setTimeout(() => {
  ;(style.value = 'blue'), (style2.value.textDecorationUnderline = 'underline dotted')
}, 2000)

// 一般写tsx那种会用到css module
const cssModul_default = useCssModule()
const cssModul_ia = useCssModule('ia')

console.log('cssModul_default: ', cssModul_default)
console.log('cssModul_ia: ', cssModul_ia)
</script>
<style>
.a {
  text-decoration: underline;
}
</style>
<style scoped>
:global(.a) {
  font-weight: bold;
}
.div {
  color: v-bind(style);
  text-decoration: v-bind('style2.textDecorationUnderline');
}
</style>
<style module>
.div2 {
  color: burlywood;
}

.div2border {
  border: 1px solid #ccc;
  margin: 10px;
}
</style>

<style module="ia">
.div3 {
  color: aqua;
}

.div3border {
  border: 1px solid rebeccapurple;
  margin: 10px;
}
</style>
